<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线预订订单查找</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/pravate/common.css" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/pravate/orderSearchDeposit.css" />
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<style>
		.moreSearch{
			color: #1E90FF;
		}
		.moreSearch span{
			position: relative;
			top: -6px;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">查找</h1>
		</header> 
		<div class="mui-content">
			<!--搜索条件列表-->
		    <ul class="searchCriteria">
		    	<li>
		    		<label>凭证号</label>
		    		<input type="number" placeholder="请输入凭证号" />
		    	</li>
		    	<li class="others hidden">
		    		<label>订单号</label>
		    		<input type="text" placeholder="请输入订单号" />
		    	</li>
		    	<li class="others hidden">
		    		<label>入住号码</label>
		    		<input type="number" placeholder="请输入接收人手机号码" />
		    	</li>
		    	<li class="others hidden">
		    		<label>预订号码</label>
		    		<input type="number" placeholder="请输入预订人手机号码" />
		    	</li>
		    	<li class="others hidden">
		    		<label>入住人姓名</label>
		    		<input type="text" placeholder="请输入入住人姓名" />
		    	</li>
		    	<li class="others hidden">
		    		<label>开始时间</label>
		    		<div class="time" style="font-size: 14px;line-height: 40px;padding-left: 20px;color: #666;">请选择预订时间</div>
		    	</li>
		    	<li class="others hidden">
		    		<label>结束时间</label>
		    		<div class="time" style="font-size: 14px;line-height: 40px;padding-left: 20px;color: #666;">请选择预订时间</div>
		    	</li>
		    </ul>
		    <div class="mui-text-center moreSearch hid">
	    		<img src="../img/ic_more.png" />
	    		<span>展开更多查询条件</span>
	    	</div>
		    <div class="searchBtn">
		    	<button class="mui-btn mui-btn-blue mui-btn-block" style="background: #2F81D2;">查找</button>
		    </div>
		</div>
		<script>
			mui.init();
			mui("body").on("tap",".time",function(){
				$("input").blur();
				var that=$(this);
				var dtPicker = new mui.DtPicker({type:'datetime'}); 
			    dtPicker.show(function (selectItems) { 
					var time=selectItems.y.value+"-"+selectItems.m.value+"-"+selectItems.d.value+" "+selectItems.h.value+":"+selectItems.i.value+":00";
			    	that.html(time);
			    })
			})
			mui("body").on("tap",".moreSearch",function(){
				if($(this).hasClass("hid")){
					$(this).removeClass("hid");
					$(".others").removeClass("hidden");
					$(this).children("img").attr("src","../img/ic_less@2x.png");
					$(this).children("span").html("收起查询条件");
					$(this).children("span").css("color","#999");
					return false;
				}
				$(this).addClass("hid");
				$(".others").addClass("hidden");
				$(this).children("img").attr("src","../img/ic_more.png");
				$(this).children("span").html("展开更多查询条件");
				$(this).children("span").css("color","#1E90FF");
			})
			
//			window
			mui("body").on("tap",".searchBtn button",function(){
				var reg=/^1\d{10}$/;
				$("input").blur();
				var length=$("input").length;
				var item="";
				var startTime=$(".time").eq(0).html();
				var endTime=$(".time").eq(1).html();
				for(var i=0;i<length;i++){
					if($("input").eq(i).val()!=""){
						item=i;
						break;
						return false;
					}
				}	
				
				
				//预订号码是否正确
				if(($("input").eq(3).val()!="")&&(!reg.test($("input").eq(3).val()))){
					mui.alert("请输入正确的手机号码"," ","关闭",function(){},"div");
					return false;
				}
				//入住号码是否正确
				if(($("input").eq(2).val()!="")&&(!reg.test($("input").eq(2).val()))){
					mui.alert("请输入正确的手机号码"," ","关闭",function(){},"div");
					return false;
				}
				//预订时间是否为空
				if((item==="")&&(startTime=="请选择预订时间")&&(endTime=="请选择预订时间")){
					mui.alert("请输入查找条件"," ","关闭",function(){},"div");
					return false;
				}
				if(startTime=="请选择预订时间"&&endTime!="请选择预订时间"){
					mui.alert("请选择开始时间"," ","关闭",function(){},"div");
					return false;
				}else if(startTime!="请选择预订时间"&&endTime=="请选择预订时间"){
					mui.alert("请选择结束时间"," ","关闭",function(){},"div");
					return false;
				}
				var data={
					out_order_no:$("input").eq(1).val(),
					traceNo:$("input").eq(0).val(),
					BookingName:$("input").eq(4).val(),
					BookingPhone:$("input").eq(3).val(),
					ReceivePhone:$("input").eq(2).val(),
					start_time:(startTime=="请选择预订时间")?"":startTime,
					end_time:(endTime=="请选择预订时间")?"":endTime
				}
				console.log(JSON.stringify(data));
				mui.openWindow({
					url:"onlineList.html",
					id:"onlineList.html",
					extras:{
						data:data
					}
				})
			})
		</script>
	</body>
</html>
